<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="保险类型" label-width="100px">
              <el-select v-model="tableSearchParam.insuranceClassifyId" clearable>
                <el-option
                  v-for="item in allInsuranceClassify"
                  :value="item.id"
                  :key="item.id"
                  :label="item.insuranceClassifyName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事故编号" label-width="100px">
              <el-input v-model="tableSearchParam.acidentNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="订单号" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="保单号" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceNo" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="投保人" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderCustomerName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="投保人手机" label-width="100px">
              <el-input v-model="tableSearchParam.insuranceOrderCuestomTelphone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="出单人" label-width="100px">
              <el-input v-model="tableSearchParam.driverName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="出单人手机" label-width="100px">
              <el-input v-model="tableSearchParam.driverTelephone" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="赔付方式" label-width="100px">
              <el-select v-model="tableSearchParam.payMethodArr" clearable style="width: 200px" multiple>
                <el-option value="0" key="0" label="公司垫付"></el-option>
                <el-option value="1" key="1" label="保险公司直付"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="处理进度" label-width="100px">
              <el-select v-model="tableSearchParam.accidentReportStatusArr" clearable style="width: 200px" multiple>
                <el-option value="0" key="0" label="待处理"></el-option>
                <el-option value="1" key="1" label="处理中"></el-option>
                <el-option value="2" key="2" label="待支付"></el-option>
                <el-option value="3" key="3" label="已结案"></el-option>
                <el-option value="4" key="4" label="已作废"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报案时间" label-width="70px">
              <el-date-picker
                v-model="tableSearchParam.accidentReportTime"
                type="daterange"
                range-separator="-"
                start-placeholder=""
                end-placeholder=""
                style="width:300px"
                clearable
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          default-expand-all
          v-loading="tableLoading">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="保险类型:" label-width="110px">
                      <span>{{ props.row.insuranceClassifyName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="报案时间:" label-width="110px">
                      <span>{{ props.row.accidentReportTime }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="报案地点:" label-width="110px">
                      <span>{{props.row.accidentReportAddress}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="处理进度:" label-width="110px">
                      <el-tag v-if="props.row.accidentReportStatus!=null && props.row.accidentReportStatus!=''"
                              :type="convertAccidentReportStatus(props.row.accidentReportStatus)[0]">
                        {{convertAccidentReportStatus(props.row.accidentReportStatus)[1]}}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="事故描述:" label-width="110px">
                      <truncate clamp="↓查看更多" action-class="customClass" collapsed-text-class="collapsed" :length="90" less="↑关闭" :text="props.row.accidentDesc"></truncate>
                      <!--<el-tooltip :content="props.row.accidentDesc" placement="bottom" effect="light">-->
                        <!--<span class="desc">{{props.row.accidentDesc}}</span>-->
                      <!--</el-tooltip>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="定损金额:" label-width="110px">
                      {{props.row.lossAssessmentAmount == null ? '未定' : props.row.lossAssessmentAmount}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="赔付金额:" label-width="110px">
                      {{props.row.payAmount == null ? '未定' : props.row.payAmount}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="付款方式:" label-width="110px">
                      <el-tag
                        :type="convertPayMethod(props.row.payMethod)[0]">
                        {{convertPayMethod(props.row.payMethod)[1]}}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            label="事故编号"
            property="acidentNo"
            width="110">
          </el-table-column>
          <el-table-column
            label="订单号"
            property="insuranceOrderNo"
            width="110">
          </el-table-column>
          <el-table-column
            label="保单号"
            property="insuranceNo"
            width="125">
          </el-table-column>
          <el-table-column
            label="投保产品"
            property="insuranceName">
          </el-table-column>
          <el-table-column
            label="出单人"
            property="driverName"
            width="70">
          </el-table-column>
          <el-table-column
            label="出单人手机"
            property="driverTelephone"
            width="95">
          </el-table-column>
          <el-table-column
            label="投保人"
            property="insuranceOrderCustomerName"
            width="60">
          </el-table-column>
          <el-table-column
            label="投保人手机"
            property="insuranceOrderCuestomTelphone"
            width="100">
          </el-table-column>
          <el-table-column
            label="现场图片"
            width="100">
            <template slot-scope="scope">
              <el-button
                @click="viewImages(scope.row.accidentImgs)">查看图片
              </el-button>
            </template>
          </el-table-column>
          <!--<el-table-column label="操作" width="100">-->
          <!--<template slot-scope="scope">-->
          <!--<el-dropdown placement="bottom" trigger="click">-->
          <!--<el-button>-->
          <!--操作<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
          <!--</el-button>-->
          <!--<el-dropdown-menu slot="dropdown">-->
          <!--<el-dropdown-item>-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-view"-->
          <!--type="primary"-->
          <!--@click="viewData(scope.$index, scope.row)">查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item divided v-if="scope.row.accidentReportProcess==''">-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-location"-->
          <!--type="warning"-->
          <!--@click="reachAccidentScene(scope.$index, scope.row)">抵达现场-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item divided-->
          <!--v-if="scope.row.accidentReportProcess=='0' || scope.row.accidentReportProcess=='1' || scope.row.accidentReportProcess=='0'">-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-rank"-->

          <!--@click="lossAssessment(scope.$index, scope.row)">定损金额-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item divided>-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-check"-->
          <!--type="success"-->
          <!--@click="closeCase(scope.$index, scope.row)">结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;案-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item divided>-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-delete"-->
          <!--type="info"-->
          <!--@click="cancelAccident(scope.$index, scope.row)">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;废-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item divided>-->
          <!--<el-button-->
          <!--size="mini"-->
          <!--icon="el-icon-time"-->
          <!--type="primary"-->
          <!--@click="getAccidentReportProcess(scope.$index, scope.row)">处理流程-->
          <!--</el-button>-->
          <!--</el-dropdown-item>-->
          <!--&lt;!&ndash;<el-dropdown-item divided>&ndash;&gt;-->
          <!--&lt;!&ndash;<el-button&ndash;&gt;-->
          <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
          <!--&lt;!&ndash;icon="el-icon-close"&ndash;&gt;-->
          <!--&lt;!&ndash;type="danger"&ndash;&gt;-->
          <!--&lt;!&ndash;@click="deleteData(scope.$index, scope.row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除&ndash;&gt;-->
          <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-dropdown-item>&ndash;&gt;-->
          <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <div style="height:500px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">事故编号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.acidentNo}}</el-col>
          <el-col :span="4" class="m-col-left">订单号</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.insuranceOrderNo}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保单号</el-col>
          <el-col :span="20" class="m-col-left">{{accidentReportData.insuranceNo}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">投保产品</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.insuranceName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">报案时间</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.accidentReportTime}}</el-col>
          <el-col :span="4" class="m-col-left">报案地点</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.accidentReportAddress}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col" style="height:350px">事故描述</el-col>
          <el-col :span="20" class="m-col-left" style="height:350px;overflow: auto">
            <span>{{accidentReportData.accidentDesc}}</span>
          </el-col>

          <!--{{accidentReportData.accidentDesc}}-->
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">处理进度</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag v-if="accidentReportData.accidentReportStatus!=null && accidentReportData.accidentReportStatus!=''"
                    :type="convertAccidentReportStatus(accidentReportData.accidentReportStatus)[0]">
              {{convertAccidentReportStatus(accidentReportData.accidentReportStatus)[1]}}
            </el-tag>
          </el-col>
          <el-col :span="4" class="m-col-left">付款方式</el-col>
          <el-col :span="8" class="m-col-left">
            <el-tag
              :type="convertPayMethod(accidentReportData.payMethod)[0]">
              {{convertPayMethod(accidentReportData.payMethod)[1]}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">定损金额</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportData.lossAssessmentAmount == null ? '未定' : accidentReportData.lossAssessmentAmount}}
          </el-col>
          <el-col :span="4" class="m-col-left">赔付金额</el-col>
          <el-col :span="8" class="m-col-left">
            {{accidentReportData.payAmount == null ? '未定' : accidentReportData.payAmount}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">出单人</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.driverName}}</el-col>
          <el-col :span="4" class="m-col-left">出单人手机</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.driverTelephone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">投保人</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.insuranceOrderCustomerName}}</el-col>
          <el-col :span="4" class="m-col-left">投保人手机</el-col>
          <el-col :span="8" class="m-col-left">{{accidentReportData.orderCustomerTelphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col-bottom">事故现场图片</el-col>
          <el-col :span="20" class="m-col-bottom-left">
            <div v-for="item in  accidentReportData.accidentImgs">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
            <!--<el-row :gutter="100">-->
            <!--<el-col :span="24/accidentReportData.accidentImgs.length"-->
            <!--v-for="item in accidentReportData.accidentImgs">-->
            <!--<img :src="item.url" style="margin-right:10px">-->
            <!--</el-col>-->
            <!--</el-row>-->
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="抵达现场" :visible.sync="dialogReachAccidentSceneFormVisible" top="10vh">
      <el-form :model="reachAccidentSceneData">
        <el-form-item label="抵达时间" label-width="70px" prop="reachTime">
          <el-date-picker
            v-model="reachAccidentSceneData.reachTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="现场描述" label-width="70px" prop="sceneDesc">
          <el-input type="textarea" v-model="reachAccidentSceneData.sceneDesc" auto-complete="off" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReachAccidentSceneFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReachAccidentScene">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="定损" :visible.sync="dialogLossAssessmentFormVisible" top="10vh">
      <el-form :model="lossAssessmentData">
        <el-form-item label="定损金额" label-width="70px" prop="lossAssessmentAmount">
          <el-input v-model="lossAssessmentData.lossAssessmentAmount" auto-complete="off"
                    style="width:250px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLossAssessmentFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleLossAssessment">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="结案" :visible.sync="dialogCloseCaseFormVisible" top="10vh">
      <el-form :model="closeCaseData">
        <el-form-item label="定损金额" label-width="70px">
          {{closeCaseData.lossAssessmentAmount}}
        </el-form-item>
        <el-form-item label="免赔金额" label-width="70px" prop="aoadAmount">
          <el-input-number v-model="closeCaseData.aoadAmount" :precision="2" :step="0.01"
                           style="width:250px" @change="aoadAmountChange"></el-input-number>
        </el-form-item>
        <el-form-item label="赔付金额" label-width="70px" prop="payAmount">
          <el-input-number v-model="closeCaseData.payAmount" :precision="2" :step="0.01"
                           style="width:250px"></el-input-number>
        </el-form-item>
        <el-form-item label="支付方式" label-width="70px" prop="payMethod">
          <el-radio-group v-model="closeCaseData.payMethod" @change="payMethodChange" style="width:250px">
            <el-radio :label="'0'">公司垫付</el-radio>
            <el-radio :label="'1'">保险公司直付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付款员工" label-width="70px" prop="payEmployee" v-if="showPayInfo">
          <el-select v-model="closeCaseData.payEmployee" placeholder="请选择" style="width:250px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款时间" label-width="70px" prop="payTime" v-if="showPayInfo">
          <el-date-picker
            v-model="closeCaseData.payTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width:250px">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCloseCaseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseCase">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="作废" :visible.sync="dialogCancelAccidentFormVisible" top="10vh">
      <el-form :model="cancelAccidentData">
        <el-form-item label="作废原因" label-width="70px" prop="invalidReason">
          <el-input type="textarea" v-model="cancelAccidentData.invalidReason" auto-complete="off" :rows="8"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReachAccidentSceneFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCancelAccident">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="处理流程" :visible.sync="dialogProcessFormVisible" top="10vh">
      <el-form :model="accidentReportProcessData" inline>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事故编号" label-width="70px">
              {{accidentReportProcessData.acidentNo}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保单号" label-width="70px">
              {{accidentReportProcessData.insuranceNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保产品" label-width="70px">
              {{accidentReportProcessData.insuranceName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理进度" label-width="70px">
              <el-tag
                v-if="accidentReportProcessData.accidentReportStatus!=null && accidentReportProcessData.accidentReportStatus!=''"
                :type="convertAccidentReportStatus(accidentReportProcessData.accidentReportStatus)[0]">
                {{convertAccidentReportStatus(accidentReportProcessData.accidentReportStatus)[1]}}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="报案信息" name="1">
            <el-row>
              <el-col :span="12">
                <el-form-item label="报案地点" label-width="70px">
                  {{accidentReportProcessData.accidentReportAddress}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报案时间" label-width="70px">
                  {{accidentReportProcessData.accidentReportTime}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="抵达现场" name="2" v-if="this.accidentReportProcessData.accidentReportProcess>='0'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="抵达时间" label-width="70px">
                  {{accidentReportProcessData.reachTime}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="现场描述" label-width="70px">
                  {{accidentReportProcessData.sceneDesc}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName1}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime1}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="定损" name="3" v-if="this.accidentReportProcessData.accidentReportProcess>='1'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="定损金额" label-width="70px">
                  {{accidentReportProcessData.lossAssessmentAmount}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName2}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime2}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="赔付" name="4" v-if="this.accidentReportProcessData.accidentReportProcess>='2'">
            <el-row>
              <el-col :span="24">
                <el-form-item label="赔付方式" label-width="70px">
                  <el-tag
                    :type="convertPayMethod(accidentReportProcessData.payMethod)[0]">
                    {{convertPayMethod(accidentReportProcessData.payMethod)[1]}}
                  </el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="免赔金额" label-width="70px">
                  {{accidentReportProcessData.aoadAmount}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="赔付金额" label-width="70px">
                  {{accidentReportProcessData.payAmount}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="付款员工" label-width="70px" v-if="accidentReportProcessData.payMethod==0">
                  {{accidentReportProcessData.payEmployee}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款时间" label-width="70px" v-if="accidentReportProcessData.payMethod==0">
                  {{accidentReportProcessData.payTime}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="录入员工" label-width="70px">
                  {{accidentReportProcessData.updatedByName3}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="录入时间" label-width="70px">
                  {{accidentReportProcessData.updatedTime3}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="现场图片" :visible.sync="dialogTupianFormVisible" top="5vh">
      <!--<div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>-->
      <!--<div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}-->
      <!--</div>-->
      <!--<el-carousel height="250px" @change="orderImagesChange" :autoplay="false" v-if="images.length != 0">-->
      <!--<el-carousel-item v-for="item in imgUrl" :key="item.url">-->
      <!--<img :src="item" width="100%">-->
      <!--</el-carousel-item>-->
      <!--</el-carousel>-->
      <!--<br/>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">执照地点：{{images.length != 0 ? images[imgIndex].takeAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <!--<el-row v-if="images.length != 0">-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--<el-col :span="10">上传地点：{{images.length != 0 ? images[imgIndex].uploadAddress : ''}}</el-col>-->
      <!--<el-col :span="7">&nbsp;</el-col>-->
      <!--</el-row>-->
      <div style="height:300px">
        <div style="text-align: center" v-if="images.length == 0">暂无相关图片</div>
        <div v-for="(item,index) in  images" v-if="images.length != 0">
          <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
               @click="showImg1(item.url,index)">
            <img :src="baseUrl+item.url"
                 style="width:100%;height:100%;"></img>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">
        <img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible1" top="10vh">
      <div style="text-align: center">
        <el-row type="flex" align="middle">
          <el-col :span="2">
            <el-button icon="el-icon-d-arrow-left" circle @click="prePic"></el-button>
          </el-col>
          <el-col :span="20">
            <div style="text-align: center" v-if="images.length != 0">{{images.length != 0 ? images[imgIndex].title : ''}}
            </div>
            <div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg"
                 v-if="images.length != 0">
              <img :src="baseUrl+(images[imgIndex].url)" style="width:80%;height: auto">
            </div>
            <!--<div class="viewImg" :style="{transform:'rotate('+roteVal+'deg)'}" @click="roteImg">-->
            <!--<img :src="baseUrl+imgUrlaa" style="width:80%;height: auto">-->
            <!--<img :src="imgs[imgIndex]" style="width:80%;height:auto">-->
            <!--</div>-->
          </el-col>
          <el-col :span="2">
            <el-button icon="el-icon-d-arrow-right" circle @click="nextPic"></el-button>
          </el-col>
        </el-row>
      </div>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">执照时间：{{images.length != 0 ? images[imgIndex].takeTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">拍照地点：{{accidentAddress}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传时间：{{images.length != 0 ? images[imgIndex].uploadTime : ''}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <el-row v-if="images.length != 0">
        <el-col :span="7">&nbsp;</el-col>
        <el-col :span="10">上传地点：{{accidentAddress}}</el-col>
        <el-col :span="7">&nbsp;</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .viewImg {
    text-align: center
  }

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .desc {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
</style>

<script>

  import accidentReportApi from '@/api/accidentReportApi'
  import insuranceClassifyApi from '@/api/insuranceClassifyApi'
  import jsonp from 'jsonp'
  import truncate from 'vue-truncate-collapsed';

  export default {
    components: {
      truncate
    },
    created() {
      var that = this
      document.onkeydown = function (e) {
        var key = window.event.keyCode;
        if (key == 39) {
          that.nextPic()
        }
        if (key == 37) {
          that.prePic()
        }
      }
      this.listAllInsuranceClassify()
      this.listTableData()
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        roteVal: 0,
        allInsuranceClassify: [],
        dialogImgFormVisible: false,
        imgUrlaa: '',
        tableLoading: true,
        activeName: '1',
        dialogTupianFormVisible: false,
        dialogFormVisible: false,
        tableSearchParam: {},
        accidentReportData: {},
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
        dialogReachAccidentSceneFormVisible: false,
        reachAccidentSceneData: {
          id: '',
          currentProcess: '',
          reachTime: '',
          sceneDesc: ''
        },
        dialogLossAssessmentFormVisible: false,
        lossAssessmentData: {
          id: '',
          currentProcess: '',
          lossAssessmentAmount: ''
        },
        dialogCloseCaseFormVisible: false,
        closeCaseData: {
          id: '',
          payMethod: '',
          lossAssessmentAmount: '',
          aoadAmount: '',
          payAmount: '',
          payEmployee: '',
          payTime: '',
          currentProcess: ''
        },
        dialogCancelAccidentFormVisible: false,
        cancelAccidentData: {
          id: '',
          currentProcess: '',
          invalidReason: ''
        },
        multipleSelection: [],
        images: [],
        imgUrl: [],
        imgIndex: 0,
        showPayInfo: false,
        dialogProcessFormVisible: false,
        accidentReportProcessData: {},
        imgUrlaa1: '',
        dialogImgFormVisible1: false,
        accidentAddress: ''
      }
    },
    methods: {
      prePic() {
        this.imgIndex = this.imgIndex - 1
        if (this.imgIndex < 0) this.imgIndex = this.images.length - 1
      },
      nextPic() {
        this.imgIndex = this.imgIndex + 1
        if (this.imgIndex >= this.images.length) this.imgIndex = 0
      },
      roteImg() {
        this.roteVal += 90
      },
      listAllInsuranceClassify() {
        insuranceClassifyApi.listAll((res) => {
          this.allInsuranceClassify = res
        }, () => {
        })
      },
      showImg(url) {
        this.roteVal = 0
        this.dialogImgFormVisible = true
        this.imgUrlaa = url
      },
      showImg1(url, index) {
        jsonp('http://api.map.baidu.com/geocoder/v2/?ak=Y3RqwGsCeVUgmLY4UYRFgght&output=json&pois=1&location=' + this.images[index].takeAddress, null, (err, data) => {
          if (err) {
            console.log(err)
          } else {
            console.log(data)
            this.accidentAddress = data.result.formatted_address
            this.roteVal = 0
            this.dialogImgFormVisible1 = true
            this.imgUrlaa1 = url
            this.imgIndex = index
          }
        })

      },
      viewImages(accidentImgs) {
        this.imgUrl = []
        this.images = []
        for (var uc of accidentImgs) {
          uc.title = '事故图片'
          this.imgUrl.push(uc.url)
          this.images.push(uc)
        }
        this.dialogTupianFormVisible = true
      },
      orderImagesChange(index, oldIndex) {
        this.imgIndex = index
      },
      reachAccidentScene(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.reachAccidentSceneData.id = row.id
          if (res.accidentReportProcess == null) {
            this.reachAccidentSceneData.currentProcess = '-1'
          } else {
            this.reachAccidentSceneData.currentProcess = res.accidentReportProcess
          }
          this.reachAccidentSceneData.reachTime = res.reachTime
          this.reachAccidentSceneData.sceneDesc = res.sceneDesc
          this.dialogReachAccidentSceneFormVisible = true
        }, () => {
        })
      },
      handleReachAccidentScene() {
        accidentReportApi.reachAccidentScene(this.reachAccidentSceneData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogReachAccidentSceneFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      lossAssessment(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.lossAssessmentData.id = row.id
          this.lossAssessmentData.currentProcess = row.accidentReportProcess
          this.lossAssessmentData.lossAssessmentAmount = row.lossAssessmentAmount
          this.dialogLossAssessmentFormVisible = true
        })

      },
      handleLossAssessment() {
        accidentReportApi.lossAssessment(this.lossAssessmentData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogLossAssessmentFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      closeCase(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.closeCaseData.id = row.id
          this.closeCaseData.currentProcess = row.accidentReportProcess
          this.closeCaseData.lossAssessmentAmount = row.lossAssessmentAmount
          this.closeCaseData.aoadAmount = res.aoadAmount == null ? row.deductionAmount : res.aoadAmount
          if (res.payAmount == null) {
            this.closeCaseData.payAmount = row.lossAssessmentAmount - row.deductionAmount
          } else {
            this.closeCaseData.payAmount = res.payAmount
          }

          this.closeCaseData.payMethod = res.payMethod
          if (res.payMethod === '0') {
            this.showPayInfo = true
          } else {
            this.showPayInfo = false
            this.closeCaseData.payEmployee = ''
            this.closeCaseData.payTime = ''
          }
          this.closeCaseData.payEmployee = res.payEmployee
          this.closeCaseData.payTime = res.payTime
          this.closeCaseData.payMethod = res.payMethod

          this.dialogCloseCaseFormVisible = true
        })

      },
      payMethodChange(value) {
        if (value === '0') {
          this.showPayInfo = true
        } else {
          this.showPayInfo = false
          this.closeCaseData.payEmployee = ''
          this.closeCaseData.payTime = ''
        }
      },
      aoadAmountChange(value) {
        this.closeCaseData.payAmount = this.closeCaseData.lossAssessmentAmount - value
      },
      handleCloseCase() {
        accidentReportApi.closeCase(this.closeCaseData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogCloseCaseFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      cancelAccident(index, row) {
        this.$confirm('事故作废后无法恢复，请确认后再操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentReportApi.getAccidentReportProcess(row.id, (res) => {
            this.cancelAccidentData = res
            this.cancelAccidentData.id = row.id
            this.cancelAccidentData.currentProcess = row.accidentReportProcess
            this.cancelAccidentData.invalidReason = res.invalidReason
            this.dialogCancelAccidentFormVisible = true
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消作废'
          })
        })

      },
      handleCancelAccident() {
        accidentReportApi.cancelAccident(this.cancelAccidentData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogCancelAccidentFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      getAccidentReportProcess(index, row) {
        accidentReportApi.getAccidentReportProcess(row.id, (res) => {
          this.accidentReportProcessData.currentProcess = row.accidentReportProcess
          this.accidentReportProcessData = res
          this.dialogProcessFormVisible = true
        }, () => {
        })
      },
      listTableData() {
        this.tableLoading = true
        accidentReportApi.listServiceAccidentReport(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      viewData(index, row) {
        accidentReportApi.get(row.id, (res) => {
          this.accidentReportData = res
          this.dialogFormVisible = true
        }, () => {
        })
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentReportApi.remove(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      convertPayMethod(payMethod) {
        let convertRet = []
        switch (payMethod) {
          case '0':
            convertRet[0] = 'success'
            convertRet[1] = '公司垫付'
            break
          case '1':
            convertRet[0] = 'success'
            convertRet[1] = '保险公司直付'
            break
          default:
            convertRet[0] = 'success'
            convertRet[1] = '未定'
            break
        }
        return convertRet
      },
      convertAccidentReportStatus(accidentReportStatus) {
        let convertRet = []
        switch (accidentReportStatus) {
          case '0':
            convertRet[0] = 'danger'
            convertRet[1] = '待处理'
            break
          case '1':
            convertRet[0] = 'primary'
            convertRet[1] = '处理中'
            break
          case '2':
            convertRet[0] = 'warning'
            convertRet[1] = '待支付'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '已结案'
            break;
          case '4':
            convertRet[0] = 'info'
            convertRet[1] = '已作废'
            break
        }
        return convertRet
      },
      convertOrdErexecuteStatus(orderErexecuteStatus) {
        let convertRet = []
        switch (orderErexecuteStatus) {
          case '1':
            convertRet[0] = ''
            convertRet[1] = '有效期间'
            break
          case '2':
            convertRet[0] = 'warning'
            convertRet[1] = '出险处理'
            break
          case '3':
            convertRet[0] = 'success'
            convertRet[1] = '正常中止'
            break
          case '4':
            convertRet[0] = 'info'
            convertRet[1] = '已赔付中止'
            break
        }
        return convertRet
      }
    }
  }

</script>
